<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="./css/bootstrap.min.css"  rel="stylesheet">
		<script src="./js/bootstrap.min.js"></script>

	</head>
	<body>
	<style type="text/css">
	* {
	  box-sizing: border-box;
	}
	
	body {
	  background-color:#1E90FF;
	  font-family: sans-serif;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  left:1000px;
	  right:1000px;
	  justify-content: center;
	  
	  overflow: hidden;
	  margin: 0;
	}
	h3{margin-left:500px;margin-right:500px;
	
	}
	#text{
	  color:#fff;
	}
	
	div {
	  position: absolute;
	  bottom: 20px;
	  font-size: 9px;
	  background-color: #fff;
	  opacity:0.8;  
	}
	
	input {
	  width: 50px;
	  padding: 5px;
	  font-size: 9px;
	  background-color: #fafafa;
	  border: none;
	  text-align: center;
	}
	
	input:focus {
	  outline: none;
	}
	</style>
	</head>
	<body>
	    <h3 style="color:#fff;">《寒窑赋》</h3>
	    <h4 id="text">开始打字</h4>
	      <input type="text"  style="text-indent=2em" name="speed" id="speed" hidden="true" value="1" min="1" max="20" step="1" /> 
	  </body>
	<script>
	const textEl = document.getElementById('text')
	const speedEl = document.getElementById('speed')
	const text = '天地有常用，日月有常明，四时有常序，鬼神有常灵。'+'\r\n'+
	'天有宝，日月星辰，地有宝，五谷金银。'+'\r\n'+
	'家有宝，孝子贤孙，国有宝，正直忠良。'+'\r\n'+
	'合天道，则天府鉴临，合地道，则地府消愆，合人道，则民用和睦。'+'\r\n'+
	'三道既合，祸去福来。天地和，则万物生。'+
	'地道和，则万物兴。父子和，而家有济。夫妇和，而义不分。'+
	'时势不可尽倚，贫穷不可尽欺，世事翻来覆去，须当周而复始。'+'\r\n'+
	'余者，居洛阳之时，朝投僧寺，夜宿破窑。布衣不能遮其体，饘粥不能充其饥。'+
	'上人嫌，下人憎，皆言余之贱也，余曰：非贱也，乃时也，运也，命也。'+'\r\n'+
	'余后登高及第，入中书，官至极品，位列三公，'+
	'思衣则有绮罗千箱，思食则有百味珍馐，有挞百僚之杖，有斩佞臣之剑，出则壮士执鞭，入则佳人扶袂，廪有余粟，库有余财，'+
	'人皆言余之贵也，余曰：非贵也，乃时也，运也，命也。'+
	'蛟龙未遇，暂居云雾之间。君子失时，屈守小人之下。'+
	'命运未通，被愚人之轻弃。时运未到，被小人之欺凌。'+
	'初贫君子，自怨骨格风流。乍富小人，不脱俗人体态。'+
	'生平结交惟结心，莫论富贵贫贱。深得千金，而不为贵，得人一语，而胜千金。吾皆悼追无恨人，富贵须当长保守，'+
	'苏秦未遇，归家时，父母憎，兄弟恶，嫂不下玑，妻不愿炊，'+
	'然衣锦归故里，马壮人强，萤光彩布，兄弟含笑出户迎，妻嫂下阶倾己顾，苏秦本是旧苏秦，昔日何陈今何亲。'+
	'自家骨肉尚如此，何况区区陌路人，抑犹未也'+'\r\n'+
	'文章冠世，孔子尚厄于陈邦。武略超群，太公曾钓于渭水。'+
	'颜回命短，岂是凶暴之徒。盗柘年长，自非贤良之辈。'+
	'帝尧天圣，却养不肖之男。瞽叟顽嚣，反生大孝之子。'+
	'甘罗十二为宰相，买臣五十作公卿。晏婴身长五尺，封为齐国宰相。'+
	'韩信力无缚鸡，立为汉朝贤臣，未遇之时，口无一日瓮飧，及至兴通，身受齐王将印，吓燕取赵，统百万雄兵，一旦时休，卒于阴人之毒手。李广有射虎之威，到老无封。冯唐有安邦之志，一世无遇。'+
	'上古圣贤，不掌阴阳之数。今日儒士，岂离否泰之中。'+
	'腰金衣紫，都生贫贱之家。草履毛鞋，都是富豪之裔。'+
	'有贫贱，而后有富贵。有小壮，而后有老衰。人能学积善，家有余庆。青春美女，反招愚独之夫。俊秀才郎，竟配丑貌之妇。五男二女，老来一身全无。万贯千金，死后离乡别井。才疏学浅，少年及第登科。满腹文章，到老终身不第。或富贵，或贫贱，皆由命理注定。'+'\r\n'+
	'若天不得时，则日月无光。地不得时，则草木不生。水不得时，则波浪不静。人不得时，则命运不通。若无根本八字，岂能为卿为相。一生皆由命，半点不由人。'+
	'蜈蚣多足，不及蛇灵。雄鸡有翼，飞不及鸦。马有千里之驰，非人不能自往。人有千般巧计，无运不能自达。'+
	'吾敬为此劝世文也。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           '
	let idx = 1
	let speed = 100 / speedEl.value
	writeText()
	function writeText() {
	    textEl.innerText = text.slice(0, idx)
	    idx++
	    if(idx > text.length) {
	        idx = 1
	    }
	    setTimeout(writeText, speed)
	}
	speedEl.addEventListener('input', (e) => speed = 200 / e.target.value)
	</script>
</html>